<!--
* @Author: zhangjing
* @Date: 2025-06-16 10:57:31
* @Description: 发放手环=>
-->
<template>
	<el-dialog title="发放手环" :visible.sync="detailVisible" width="600" :before-close="handleClose">
		<avue-form ref="form" :option="option" v-model="form" @submit="submit">
			<template slot-scope="scope" slot="deviceBracelets">
				<el-select
					v-model="form.deviceBracelets"
					filterable
					remote
					clearable
					reserve-keyword
					placeholder="请输入 手环名称"
					:remote-method="searchBracelets"
					:loading="loading"
				>
					<el-option
						v-for="item in braceletsList"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					></el-option>
				</el-select>
			</template>
			<template slot-scope="scope" slot="deviceId">
				<el-select
					v-model="form.deviceList[scope.row.$index].deviceId"
					filterable
					remote
					clearable
					reserve-keyword
					placeholder="请输入 设备名称"
					:remote-method="(key) => searchDevice(key, scope.row.$index)"
					:loading="loading"
				>
					<el-option
						v-for="item in deviceList"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					></el-option>
				</el-select>
			</template>
		</avue-form>
		<span slot="footer" class="avue-dialog__footer">
			<el-button type="primary" size="small" @click="save" icon="el-icon-circle-plus-outline">同 步</el-button>
			<el-button size="small" @click="detailVisible = false" icon="el-icon-circle-close">关 闭</el-button>
		</span>
	</el-dialog>
</template>

<script>
import { getList } from "@/api/ecgManage/device";
import { bindDevice } from "@/api/ecgManage/patient";
export default {
	data() {
		return {
			detailVisible: false,
			braceletsList: [],
			deviceList: [],
			loading: false,
			form: {},
			hospPatientId: ""
		};
	},
	computed: {
		option() {
			return {
				submitBtn: false,
				emptyBtn: false,
				span: 20,
				column: [
					{
						label: "手环名称",
						prop: "deviceBracelets",
						rules: [
							{
								required: true,
								message: "请输入手环名称",
								trigger: "blur"
							}
						]
					},

					{
						label: "绑定设备",
						prop: "deviceList",
						type: "dynamic",
						span: 20,
						children: {
							index: false,
							align: "center",
							type: "form",
							headerAlign: "center",
							rowAdd: (done) => {
								done({
									deviceType: 1
								});
							},
							rowDel: (row, done) => {
								done();
							},
							column: [
								{
									width: 200,
									label: "设备类型",
									type: "select",
									prop: "deviceType",
									dicData: [
										{
											label: "心电",
											value: 1
										},
										{
											label: "血压",
											value: 2
										}
									]
								},
								{
									label: "设备名称",
									prop: "deviceId"
								}
							]
						}
					}
				]
			};
		}
	},
	methods: {
		handleOpen(hospPatientId) {
			this.hospPatientId = hospPatientId;
			this.braceletsList = [];
			this.deviceList = [];
			this.form = {
				deviceList: [],
				deviceBracelets: ""
			};
			this.detailVisible = true;
		},
		handleClose() {
			this.detailVisible = false;
			this.$emit("ok");
		},
		submit(form, done) {
			let { deviceBracelets, deviceList } = this.form;
			let ids = deviceList.map((item) => item.deviceId);
			let params = {
				idList: [deviceBracelets, ...ids],
				hospPatientId: this.hospPatientId
			};
			bindDevice(params).then((res) => {
				if (res.result) {
					this.$modal.msgSuccess("指令下发成功，等待设备绑定");
					setTimeout(() => {
						this.handleClose();
					}, 800);
				}
				done();
			});
		},
		save() {
			this.$refs.form.submit();
		},
		searchBracelets(key) {
			if (key.length > 0) {
				this.loading = true;
				getList({
					bindStatus: 0,
					deviceType: 0,
					deviceName: key,
					pageSize: 20,
					pageNum: 1
				})
					.then((res) => {
						this.braceletsList = res.data.records.map((item) => {
							return {
								label: item.deviceName,
								value: item.id,
								name: item.deviceName
							};
						});
					})
					.finally(() => {
						this.loading = false;
					});
			} else {
				this.braceletsList = [];
			}
		},
		searchDevice(key, index) {
			if (key.length > 0) {
				let deviceType = [
					{
						label: "心电",
						value: 1
					},
					{
						label: "血压",
						value: 2
					}
				][index].value;
				this.loading = true;
				getList({
					deviceType: deviceType,
					deviceName: key,
					pageSize: 20,
					pageNum: 1,
					bindStatus: 0
				})
					.then((res) => {
						this.deviceList = res.data.records.map((item) => {
							return {
								label: item.deviceName,
								value: item.id,
								name: item.deviceName
							};
						});
					})
					.finally(() => {
						this.loading = false;
					});
			} else {
				this.deviceList = [];
			}
		}
	}
};
</script>

<style>
.el-dialog__header {
	padding: 16px 24px;
	min-height: 20px;
	border-bottom: 1px solid #f0f0f0;
}
</style>
